@charset "UTF-8";
/*
如果你的整个网站中有几处小小的样式类似，那么使用变量来统一处理这种情况是非常不错的选中，但是
当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了
你可以通过sass的混合器实现大段样式的重用
混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式，
下面这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框
*/
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/*
利用混合器，可以很容易地在样式表的不同地方共享样式，如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式
本身就是一个逻辑单元，比如说是一组放在一起有意义的属性，
混合器在某些方面跟css类很像，都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑，最重要的区别就是，类名是在html文件中应用的，
而混合器是在样式表中应用的，这就意味着，类名具有语义化含义，而不仅仅是一种展示性的描述；用来描述html元素的含义，而不是html元素的外观。
另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。
*/
ul.plain {
  color: #444;
  list-style: none;
}

ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

ul.plain {
  color: #444;
  list-style: none;
}

ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

/*
*混合器并不一定总得生成相同的样式，可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。
当@include混合器时。参数其实就是可以赋值给css属性的变量。如果你写过javascript， 这种方式跟javascript的function很像
*/
a {
  color: blue;
}

a:hover {
  color: red;
}

a:visited {
  color: green;
}

a {
  color: blue;
}

a:hover {
  color: red;
}

a:visited {
  color: green;
}

a {
  color: blue;
}

a:hover {
  color: red;
}

a:visited {
  color: green;
}
